<template>
  <div class="app-wrap">
    <!-- header -->
    <!-- <Header></Header> -->

    <div class="loading" v-if="0" :style="'top: ' + navHeight + 'px'">
      <!-- 栏目 -->
      <div v-if="adverstisedata[0].type == 1">
        <router-link
          :to="
            '/ExclusiveColumnList?id=' +
            adverstisedata[0].rid +
            '&&title=' +
            item.title +
            '&&img=' +
            item.imgUrl
          "
        >
          <img :src="adverstisedata[0].imgUrl" />
        </router-link>
      </div>
      <!-- 合辑 -->
      <div v-if="adverstisedata[0].type == 2">
        <router-link :to="'/Detail?id=' + adverstisedata[0].rid">
          <img v-lazy="adverstisedata[0].imgUrl" />
        </router-link>
      </div>
      <!-- 音频 -->
      <div v-if="adverstisedata[0].type == 3">
        <router-link :to="'/Playing?audioId=' + adverstisedata[0].rid">
          <img v-lazy="adverstisedata[0].imgUrl" />
        </router-link>
      </div>
      <!-- 活动页 -->
      <div v-if="adverstisedata[0].type == 4">
        <a :href="adverstisedata[0].redirectUrl">
          <img v-lazy="adverstisedata[0].imgUrl" />
        </a>
      </div>
      <!-- 外链指定页 -->
      <div v-if="adverstisedata[0].type == 5">
        <a :href="adverstisedata[0].redirectUrl">
          <img v-lazy="adverstisedata[0].imgUrl" />
        </a>
      </div>
      <!-- 小程序 -->
      <div v-if="adverstisedata[0].type == 6">
        <router-link to>
          <img v-lazy="adverstisedata[0].imgUrl" />
        </router-link>
      </div>

      <span class="time">{{ adverstisetime }}s后关闭</span>
    </div>

    <div class="defaulttop" id="defaulttop" ref="defaulttop">
      <img
        class="bg"
        src="https://youyang-cdn.mdshuzhi.com/upload/home_banner_bg.png"
      />
      <img src="../../static/images/pic_logo@2x.png" alt="" class="main-icon" />
      <div class="search">
        <img
          class="icon"
          src="https://youyang-cdn.mdshuzhi.com/upload/icon_search.png"
        />
        <input
          type="text"
          class="search-text"
          placeholder-class="placeholder"
          placeholder="搜索你想听的节目"
          @click="tosearch"
          confirm-type="search"
        />
        <div class="sign" @click="opensign">
          <img class="icon2" src="../../static/images/sign_in@2x.png" />
        </div>
      </div>
      <!-- banner -->
      <div class="banner" v-if="banner.length > 0">
        <swiper :options="swiperOption">
          <swiper-slide v-for="(item, index) in banner" :key="index">
            <template v-if="item.status != -1">
              <!-- 栏目 -->
              <div class="item" v-if="item.type == 1">
                <router-link
                  class="routerLink"
                  :to="'/ExclusiveColumnList?id=' + item.rid"
                >
                  <img v-lazy="item.imgUrl" class="slide-image"  ref="banner"/>
                </router-link>
                <router-link
                  class="type routerLink"
                  :to="'/PopSlowSongs?id=' + item.rid + '&&title=' + item.title"
                  >{{ item.title }}</router-link
                >
              </div>

              <!-- 合辑 -->
              <div class="item" v-if="item.type == 2">
                <router-link
                  class="routerLink"
                  :to="'/albumDetail?id=' + item.rid + '&sortBy=2'"
                >
                  <img :src="item.imgUrl" class="slide-image" />
                </router-link>
                <div class="type">{{ item.title }}</div>
              </div>

              <!-- 音频 -->
              <div class="item" v-if="item.type == 3">
                <router-link :to="'/Playing?audioId=' + item.rid">
                  <img :src="item.imgUrl" class="slide-image" />
                </router-link>
                <div class="type">{{ item.title }}</div>
              </div>

              <!-- 活动页 -->
              <div class="item" v-if="item.type == 4">
                <a :href="item.redirectUrl">
                  <img :src="item.imgUrl" class="slide-image" />
                </a>
                <div class="type">{{ item.title }}</div>
              </div>

              <!-- 外链指定页 -->
              <div class="item" v-if="item.type == 5">
                <a :href="item.redirectUrl">
                  <img :src="item.imgUrl" class="slide-image" />
                </a>
                <div class="type">{{ item.title }}</div>
              </div>

              <!-- 小程序 -->
              <div class="item" v-if="item.type == 6">
                <router-link to>
                  <img :src="item.imgUrl" class="slide-image" />
                </router-link>
                <div class="type">{{ item.title }}</div>
              </div>
            </template>
          </swiper-slide>
        </swiper>

        <!-- <audio
          controls
          id="myAudio"
          ref="myAudio"
          preload="auto"
          style="display: none"
          @timeupdate="onTimeupdate"
          :src="currentSong.audioUrl"
          @ended="onEnded"
        >
          <source :src="currentSong.audioUrl" ref="msource" type="audio/mp3" />
          您的浏览器不支持音频播放
          <source src="https://youyang-cdn.mdshuzhi.com//upload/20200901/1598955862750_374888.mp3" ref="msource" type="audio/wav" />您的浏览器不支持音频播放
        </audio> -->

        <div class="proress">
          <div class="proressBar-wrap" ref="progressBarLine">
            <div class="progressBar">
              <div
                class="progressBarLine"
                @touchstart="handleTouchStart"
                @touchmove="handleTouchMove"
                @touchend="handleTouchEnd"
              >
                <div class="current" :style="'width:' + percent + '%'">
                  <span
                    ref="barLine"
                    @touchstart="handleTouchStart"
                    @touchmove="handleTouchMove"
                    @touchend="handleTouchEnd"
                  ></span>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div>
              <img
                src="https://youyang-cdn.mdshuzhi.com/upload/icon_single.png?v3"
                v-if="playMod == 3"
                @click="changeMod"
              />
              <img
                src="https://youyang-cdn.mdshuzhi.com/upload/icon_list2.png?v3"
                v-if="playMod == 1"
                @click="changeMod"
              />
              <img
                src="https://youyang-cdn.mdshuzhi.com/upload/icon_random.png?v3"
                v-if="playMod == 2"
                @click="changeMod"
              />
            </div>
            <div class="play paused">
              <img
                src="https://youyang-cdn.mdshuzhi.com/upload/icon_play1.png?v3"
                v-if="play == 1"
                @click="togglePlaying"
              />
              <img
                src="https://youyang-cdn.mdshuzhi.com/upload/icon_stop1.png?v3"
                v-if="play == 2"
                @click="togglePlaying"
              />
            </div>
            <div class="set-time-val" @click="setTimeBtn">
              <img src="../../static/images/time.png" />
              <span class="time-val" v-if="closetimeval > 0">{{
                closetimecurrent
              }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- banner end -->
    </div>
    <div
      class="defaulttop_bank"
      :style="{ height: defaulttopHeight + 'px' }"
    ></div>
    <div class="main" ref="main">
      <div class="meau" v-show="meau.length > 0">
        <router-link
          v-for="(item, index) in meau"
          :key="index"
          :to="'/ExclusiveColumnList?id=' + item.id"
          class="item"
          ref="meauItem"
        >
          <div class="icon">
            <img v-lazy="item.iconUrl" />
          </div>
          <div class="text">{{ item.iconTitle }}</div>
        </router-link>
        <router-link to="/column" class="item" ref="meauItem">
          <div class="icon">
            <img v-lazy="iconImg" />
          </div>
          <div class="text">更多</div>
        </router-link>
      </div>
      <div class="albumlists">
        <div class="filter">
          <div
            v-for="(item, index) in albumnav"
            :key="index"
            class="item"
            :class="albumnavcurrent == index ? 'on' : ''"
            @click="albumnavBtn(index, item)"
          >
            <div v-if="index != 3">
              {{ item }}
              <img
                class="cir"
                src="https://youyang-cdn.mdshuzhi.com/upload/tag_select.png"
              />
            </div>
          </div>
          <div class="item">
            <div @click="toTalent">达人</div>
          </div>
        </div>
        <!-- 列表 -->
        <div class="lists">
          <div class="top">
            <div class="more" @click="more">查看更多</div>
            <div class="item" :class="ishot ? 'on' : ''" @click="hot(2)">
              最HOT
            </div>
            <div class="item" :class="ishot ? '' : 'on'" @click="hot(1)">
              最新
            </div>
          </div>
          <!-- <view class="con" v-if="{{(albumnavcurrent==1 && albumlists2.length>0)&&(albumnavcurrent!=1 && albumlists1.length>0)}}"> -->
          <div class="con" v-if="albumlists.length > 0">
              <div
                v-for="(item, index) in albumlists"
                :key="index"
                class="item"
                :class="albumnavcurrent == 1 ? 'hotitem' : ''"
              >
                <div @click="goPlay(item.id, index, item.sort,item.type)">
                  <div class="pic zhuanji">
                    <img :src="item.imgUrl" />
                    <img
                      src="https://youyang-cdn.mdshuzhi.com/upload/tag_no1.png"
                      v-if="index == 0"
                      class="icon"
                    />
                    <img
                      src="https://youyang-cdn.mdshuzhi.com/upload/tag_no2.png"
                      v-if="index == 1"
                      class="icon"
                    />
                    <img
                      src="https://youyang-cdn.mdshuzhi.com/upload/tag_no3.png"
                      v-if="index == 2"
                      class="icon"
                    />
                  </div>
                  <div class="right">
                    <div class="name">
                      <img
                        class="hot_icon"
                        v-if="item.isHot == 1"
                        src="https://youyang-cdn.mdshuzhi.com/upload/tag_hot.png"
                      />
                      <span class="n">{{ item.title }}</span>
                      <!-- 外链指定页 -->
                      <template v-if="item.hasVideo == 1 && item.videoLink">
                        <a :href="item.videoLink" class="mvlook">看</a>
                      </template>
                      <span class="view_icon" v-if="item.isNew"></span>
                    </div>
                    <div class="nums">播放量：{{ item.playCount || 0 }}</div>
                  </div>
                  <div>
                    <img
                      class="play"
                      src="../../static/images/icon_play4@2x.png"
                    />
                  </div>
                </div>
              </div>
          </div>
          <view class="empty" v-else>精彩内容加载中</view>
        </div>
      </div>

      <div class="advertise" v-if="adverstise2data">
        <!-- 栏目 -->
        <div v-if="adverstise2data[0].type == 1">
          <router-link
            :to="'/ExclusiveColumnList?id=' + adverstise2data[0].rid"
          >
            <img v-lazy="adverstise2data[0].imgUrl" />
          </router-link>
        </div>
        <!-- 合辑 -->
        <div v-if="adverstise2data[0].type == 2">
          <router-link :to="'/Detail?id=' + adverstise2data[0].rid">
            <img v-lazy="adverstise2data[0].imgUrl" />
          </router-link>
        </div>
        <!-- 音频 -->
        <view v-if="adverstise2data[0].type == 3">
          <router-link :to="'/Playing?id=' + adverstise2data[0].rid">
            <img v-lazy="adverstise2data[0].imgUrl" />
          </router-link>
        </view>
        <!-- 活动页 -->
        <view v-if="adverstise2data[0].type == 4">
          <a :href="adverstise2data[0].redirectUrl">
            <img v-lazy="adverstise2data[0].imgUrl" />
          </a>
        </view>
        <!-- 外链指定页 -->
        <view v-if="adverstise2data[0].type == 5">
          <a :href="adverstise2data[0].redirectUrl">
            <img v-lazy="adverstise2data[0].imgUrl" />
          </a>
        </view>
        <!-- 小程序 -->
        <view v-if="adverstise2data[0].type == 6">
          <router-link to>
            <img v-lazy="adverstise2data[0].imgUrl" />
          </router-link>
        </view>
      </div>
    </div>

    <!-- 音频列表 -->
    <div
      class="singlists"
      id="singlists"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <!-- <div class="filter" :class="isFixedTop ? 'fixedClass':''" :style="margin-top: {{isFixedTop ?navHeight:''}}px"> -->
      <div class="filter" :class="isFixedTop ? 'fixedClass' : ''">
        <img
          class="btn next"
          @click="singnavnext"
          src="https://youyang-cdn.mdshuzhi.com/upload/icon_more_right.png"
          v-show="singnavIndex != singnav.length - 1"
        />
        <img
          class="btn prev"
          @click="singnavprev"
          src="https://youyang-cdn.mdshuzhi.com/upload/icon_more_left.png"
          v-show="singnavIndex > 0"
        />
        <div class="box">
          <div class="scroll" id="sing-nav-scroll">
            <div
              v-for="(item, index) in singnav"
              :key="index"
              class="item"
              :class="singnavcurrent == item.id ? 'on' : ''"
              @click="singnavBtn(item.id, index)"
              ref="singNav"
            >
              {{ item.title }}
              <img
                class="cir"
                src="https://youyang-cdn.mdshuzhi.com/upload/tag_select.png"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="lists" v-if="singnavdata.length > 0">
        <div class="in">
          <div class="left">
            <router-link
              :to="
                item.hasVideo == 1 && item.videoLink
                  ? item.videoLink
                  : '/Playing?categoryId=' +
                    singnavcurrent +
                    '&audioId=' +
                    item.id
              "
              tag="div"
              v-for="(item, index) in singnavdata"
              :key="index"
              class="item"
              v-if="index % 2 != 1"
            >
              <div class="musicImg">
                <img :src="item.imgUrl" />
                <!-- 听 -->
                <div class="listenBox">
                  <div>{{ item.playCount || 15 }}播放</div>
                  <!-- 外链指定页 -->
                  <template v-if="item.hasVideo == 1 && item.videoLink">
                    <span class="listenPic">
                      <img
                        class="listen"
                        src="../../static/images/listen.png"
                        alt=""
                      />
                    </span>
                  </template>
                  <!-- 小程序 -->
                  <!-- <template v-else>

<navigator target="miniProgram" open-type="navigate" app-id="{{item.videoAppId}}"

path="{{item.videoPath}}" extra-data="" version="release" hover-class="none"

class="listenPic"  >听</navigator>
                  </template>-->
                  <span v-else class="listenPic">
                    <img
                      class="listen"
                      src="../../static/images/listen.png"
                      alt=""
                    />
                  </span>
                </div>
                <div class="new" v-if="item.isNew == 1"></div>
              </div>
              <div class="musicWord">
                <div class="musicTitle">
                  <img
                    src="https://youyang-cdn.mdshuzhi.com/upload/icon_fire@2x.png"
                    v-if="item.isHot == 1"
                  />
                  <span>{{ item.title || "围魏救赵" }}</span>
                  <div class="musicDesc">{{ item.desc || "围魏救赵" }}</div>
                </div>
                <!-- <router-link
                  :to="'/PopSlowSongs?id='+item.categoryId+'&&title='+item.tag"
                  v-if="1"
                  class="lowSongs"
                  tag="div"
                >{{item.tag || '生命科学'}}</router-link>-->
                <div class="songType">
                  <!-- {{item}} -->
                  <span
                    v-for="(item2, index2) in item.keywords"
                    :key="index2"
                    >{{ item2 || "jackect" }}</span
                  >
                </div>
              </div>
            </router-link>
          </div>
          <div class="right">
            <router-link
              :to="
                item.hasVideo == 1 && item.videoLink
                  ? item.videoLink
                  : '/Playing?categoryId=' +
                    singnavcurrent +
                    '&audioId=' +
                    item.id
              "
              tag="div"
              v-for="(item, index) in singnavdata"
              :key="index"
              class="item"
              v-if="index % 2 == 1"
            >
              <div class="musicImg">
                <img :src="item.imgUrl" />
                <!-- 听 -->
                <div class="listenBox">
                  <div>{{ item.playCount || 10 }}播放</div>
                  <!-- 外链指定页 -->
                  <template v-if="item.hasVideo == 1 && item.videoLink">
                    <span hover-class="none" class="listenPic">
                      <img
                        class="listen"
                        src="../../static/images/listen.png"
                        alt=""
                      />
                    </span>
                  </template>
                  <!-- 小程序 -->
                  <!-- <template v-else>

<navigator target="miniProgram" open-type="navigate" app-id="{{item.videoAppId}}"

path="{{item.videoPath}}" extra-data="" version="release" hover-class="none"

class="listenPic" >听</navigator>
                  </template>-->
                  <span v-else class="listenPic">
                    <img
                      class="listen"
                      src="../../static/images/listen.png"
                      alt=""
                    />
                  </span>
                </div>
                <div class="new" v-if="item.isNew == 1"></div>
              </div>
              <div class="musicWord">
                <div class="musicTitle">
                  <img
                    src="https://youyang-cdn.mdshuzhi.com/upload/icon_fire@2x.png"
                    v-if="item.isHot == 1"
                  />
                  <span>{{ item.title || "好先生和皓先生" }}</span>
                  <div class="musicDesc">{{ item.desc || "围魏救赵" }}</div>
                  <!-- 外链指定页 -->
                  <template v-if="item.hasVideo == 1 && item.videoLink">
                    <a :href="item.videoLink" class="mvlook">
                      <span>看</span>
                    </a>
                  </template>
                  <!-- 小程序 -->
                  <!-- <template v-else>

<navigator target="miniProgram" open-type="navigate" app-id="wx76072ad3e2e9c56b"

path="{{item.videoPath}}" extra-data="" version="release" hover-class="none" class="mvlook">

<text>看</text>

</navigator>
                  </template>-->
                </div>
                <!-- <router-link
                  :to="'/PopSlowSongs?id='+item.categoryId+'&&title='+item.tag"
                  v-if="1"
                  class="lowSongs"
                  tag="div"
                >{{item.tag || '生命科学'}}</router-link>-->
                <div class="songType" v-if="1">
                  <span
                    v-for="(item2, index2) in item.keywords"
                    :key="index2"
                    >{{ item2 || "agoni" }}</span
                  >
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <div class="end" v-if="singnavisEnd">没有更多了~</div>
      </div>
    </div>

    <!-- 签到 -->
    <div class="prop" v-if="signbool && signListdata.length > 0">
      <div class="dateprop">
        <div class="date">
          <div class="prev" @click="prevmoths">‹</div>
          <div class="next" @click="nextmoths">›</div>
          <div class="year">{{ signmoth }}</div>
          <div class="con">
            <div class="tr">
              <div class="th on">周日</div>
              <div class="th">周一</div>
              <div class="th">周二</div>
              <div class="th">周三</div>
              <div class="th">周四</div>
              <div class="th">周五</div>
              <div class="th on">周六</div>
            </div>

            <div class="tr" v-for="(item, index) in signListdata" :key="index">
              <div
                v-for="(item2, index2) in item"
                :key="index2"
                class="td"
                :class="index2 == 0 || index2 == 6 ? 'on' : ''"
              >
                <template v-if="item2.day > 0">
                  <!-- <span class="nums" v-if="item2.canSign==0">{{item2.day<=0?'':item2.day}}</span> -->
                  <span class="nums" v-if="item2.canSign == 0">{{
                    item2.day
                  }}</span>
                  <template v-else>
                    <div class="select" v-if="item2.hasSign == 1">
                      <img
                        src="https://youyang-cdn.mdshuzhi.com/upload/tag_signed@2x.png"
                      />
                    </div>
                    <div class="noselect" v-if="item2.hasSign == 0">
                      <img
                        src="https://youyang-cdn.mdshuzhi.com/upload/tag_nosign@2x.png"
                      />
                    </div>
                    <!-- <span class="nums on" v-if="item2.hasSign==-1">{{item2.day<=0?'':item2.day}}</span> -->
                    <span class="nums on" v-if="item2.hasSign == -1">{{
                      item2.day
                    }}</span>
                  </template>
                </template>
              </div>
            </div>
          </div>
          <div class="btn" v-if="!iscanSign">不能签到</div>
          <template v-else>
            <div class="btn" @click="sign" v-if="!issign" data-btnname="签到">
              签到
            </div>
            <div class="btn" v-else>已签到</div>
          </template>
        </div>
        <img
          src="https://youyang-cdn.mdshuzhi.com/upload/date_bg.jpg"
          class="datebg"
        />
        <img
          src="https://youyang-cdn.mdshuzhi.com/upload/close_icon.png"
          class="close"
          @click="closedate"
        />
      </div>
    </div>


    <!-- 定时 -->

    <!-- <mt-popup
      v-model="closetimeFlag"
      class="set-time-wrap"
      position="bottom"
      v-if="closetime.length > 0"
    >
      <div class="set-time">
        <div
          class="time-item"
          :class="index == closetimeindex ? 'on' : ''"
          v-for="(item, index) in closetime"
          :key="index"
          @click="selectpacker(item, index)"
        >
          <div class="time-name">{{ item.name }}</div>
          <div class="time" v-if="item.value > 0">
            倒计时 {{ closetimecurrent }}
          </div>
          <div class="check"></div>
        </div>
      </div>
      <div class="btn" @click="closePopup">关闭</div>
    </mt-popup> -->


    <mt-popup
      v-model="closetimeFlag"
      class=" packerDialog"
      position="bottom"
      v-if="closetime.length > 0"
    >
      <div class="content">
        <div
          class="item"
          :class="index == closetimeindex ? 'on' : ''"
          v-for="(item, index) in closetime"
          :key="index"
          @click="selectpacker(item, index)"
        >
          <div class="name">{{ item.name }}</div>
          <div class="time" v-if="item.value > 0">
            倒计时 {{ closetimecurrent }}
          </div>
          <div class="check"></div>
        </div>
      </div>
      <div class="btn" @click="closePopup">关闭</div>
    </mt-popup>

    <Footer Navigation="home"></Footer>
  </div>
</template>

<script>
import Header from "@/components/layer/header";
import Footer from "@/components/layer/footer";
import controller from "@/components/controllers/controllers";
import { Today, formatTime3, randomNum } from "@/utils/filters";
import { Toast,MessageBox } from "mint-ui";
import { Slider } from 'element-ui'

// var myAudio = document.getElementById("myAudio")
const SEQUENCE_MODE = 1; // 列表
const RANDOM_MOD = 2; // 随机
const SINGLE_CYCLE_MOD = 3; //循环
let idx = 0;
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      iconImg: "https://youyang-cdn.mdshuzhi.com/upload/icon_more.png",//http://youyang.web.leaf-tech.net/miniStatic/
      swiperOption: {
        // initialSlide: 0,
        roundLengths : true, //防止文字模糊
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        slidesPerView: "auto",
        centeredSlides: true,
        // effect:'coverflow',
        // spaceBetween: 20,
        coverflow:{
          rotate:0,//slide做3d旋转时Y轴的旋转角度。默认50。
          stretch:100,//每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
          depth:150,//slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
          modifier:1,//depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
          slideShadows:false,//开启slide阴影。默认 true。
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loopedSlides: 5,
        watchSlidesProgress: true,
        direction: "horizontal",
        // 环状轮播
        loop: true,
        on: {
          progress: function (progress) {
            for (let i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              var slideProgress = this.slides[i].progress;
              let modify = 1;
              if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
              }
              let translate = slideProgress * modify * 260 + "px";
              let scale = 1 - Math.abs(slideProgress) / 5;
              let zIndex = 50 - Math.abs(Math.round(10 * slideProgress));
              slide.transform(
                "translateX(" + translate + ") scale(" + scale + ")"
              );
              slide.css("zIndex", zIndex);
              slide.css("opacity", 1);
              if (Math.abs(slideProgress) > 3) {
                slide.css("opacity", 0);
              }
            }
          },
          slideChange: function () {
            idx = this.activeIndex;
          },
          setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
              var slide = this.slides.eq(i);
              slide.transition(transition);
            }
          },
        },
      },
      currentSong: {},
      audioList: [],
      audioListId: "",
      currentTime: 0, //当前音频播放时间
      banner: [],
      play: 1,
      meau: [], //栏目icon
      albumnav: ["专题", "热播", "推荐", "达人"],
      albumnavType: "isTopic",
      albumlists: [], //音频列表1
      albumnavcurrent: 0,
      ishot: true,
      singnav: [], //栏目列表
      singnavdata: [], //栏目音频列表
      singnavdataleft: [],
      singnavdataright: [],
      singnavcurrent: 0, //栏目id
      singnavleft: 0,
      isprev: false,
      isnext: true,
      singnavleftend: false,
      navHeight: 66,
      defaulttopheight: 200,
      signbool: false,
      settimebool: false,
      loadingbool: true,
      isFixedTop: false,
      adverstisedata: [
        {
          appid: "appididididididid",
          audioUrl: null,
          content: "detail",
          createTime: "2020-07-28 20:27:14",
          endTime: "2020-07-31 00:00:00",
          id: 22,
          imgUrl:
            "http://youyangfm.leaf-tech.net:8081//upload/20200728/1595939193050_402553.png",
          needAutoTask: 1,
          onStatus: -1,
          redirectUrl: "http:baidu.com",
          rid: null,
          sort: 1,
          source: 3,
          startTime: "2020-07-28 00:00:00",
          status: 1,
          title: "启动广告页",
          type: 6,
          updateTime: "2020-08-04 10:39:22",
        },
      ],
      adverstise2data: "",
      adverstisetime: 3,
      signListdata: [],
      signmoth: "",
      issign: false,
      page: 1,
      pageSize: 10,
      isEnd: false,
      singnavid: "",
      singnavIndex: 0,
      singnavpage: 1,
      singnavpageSize: 10,
      singnavisEnd: false,
      compilationpage: 1,
      compilationpageSize: 10,
      compilationisEnd: false,
      sortBy: 2,
      albumlists1: [],
      albumlists2: [],
      iscanSign: null,
      playurl: "",
      currentLyric: null,
      currentLineNum: 0,
      toLineNum: -1,
      playMod: SEQUENCE_MODE,
      closetime: [
        {
          name: "不开启",
          value: 0,
        },
        {
          name: "15分钟后自动关闭",
          value: 900,
        },
        {
          name: "30分钟后自动关闭",
          value: 1800,
        },
        {
          name: "60分钟后自动关闭",
          value: 3600,
        },
        {
          name: "120分钟后自动关闭",
          value: 7200,
        },
        {
          name: "240分钟后自动关闭",
          value: 14400,
        },
      ],
      closetimecurrent: "",
      closetimeFlag: false,
      closetimeindex: "",
      closetimeval: "",
      percent: 0,
      setInter: null,
      defaulttopHeight: null,
      meauHeight: null,
      loading: false,
      currentmonth: "",
      isTouchProgress: false,
      lineWidth: 0,
      lineLeft: 0,
      timer: "", //定时器
      firstLoad: 0,
    };
  },
  watch: {
    percent(newVal) {
      if (newVal == 100) {
        this.payNext();
      }
    },
  },
  created() {
    // console.log("token", localStorage.getItem("token"));
    window.addEventListener("scroll", this.scroll);
    this.getBanner();
    this.getCategoryList();
    this.getCategoryListover();
    this.getCompilationList(this.albumnavType);
  },
  mounted() {
    this.currentmonth = Date.parse(new Date());
    if(myAudio){
      // const myAudio = this.$refs.myAudio
      myAudio.addEventListener("loadedmetadata", this.onLoadedmetadata, true);
      myAudio.addEventListener("timeupdate", this.onTimeupdate, true);
      myAudio.addEventListener("ended", this.onEnded, true);
      myAudio.addEventListener("pause", this.uploadListenTimes, true);
    }
  },
  destroyed() {
    if(myAudio){
      // const myAudio = this.$refs.myAudio
      myAudio.removeEventListener("loadedmetadata", this.onLoadedmetadata, true);
      myAudio.removeEventListener("timeupdate", this.onTimeupdate, true);
      myAudio.removeEventListener("ended", this.onEnded, true);
      myAudio.removeEventListener("pause", this.uploadListenTimes, true);
    }
  },
  methods: {
    //关闭定时
    closePopup() {
      this.$nextTick(() => {
        this.closetimeFlag = false;
      });
    },
    //选择定时的时间
    selectpacker(item, index) {
      if (index == this.closetimeindex) {
        return;
      }
      this.closetimeindex = index;
      this.closetimeval = item.value;
      this.closetimecurrent = this._formatTime(item.value);
      if (item.value <= 0) {
        if (this.timer) {
          clearInterval(this.timer);
        }
      } else {
        this.setTimeFun(item.value);
      }
    },
    //定时器
    setTimeFun(val) {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = window.setInterval(() => {
        val--;
        if (val <= 0) {
          myAudio.pause();
          clearInterval(this.timer);
        }
        this.closetimeval = val;
        this.closetimecurrent = this._formatTime(val);
      }, 1000);
    },
    //定时
    setTimeBtn() {
      this.closetimeFlag = true;
    },
    // 进度条事件
    handleTouchStart(e) {
      this.isTouchProgress = true;
      this.percent =
        ((e.touches[0].clientX - this.lineLeft) / this.lineWidth) * 100;
    },
    // 滑动进度条
    handleTouchMove(e) {
      if (e.touches[0].clientX < this.lineLeft) {
        this.percent = 0;
      } else if (e.touches[0].clientX >= this.lineWidth + this.lineLeft) {
        this.percent = 99.99;
      } else {
        this.percent =
          ((e.touches[0].clientX - this.lineLeft) / this.lineWidth) * 100;
      }
      const progressBarLeft = (this.percent / 100) * this.lineWidth + "px";
      this.$refs.barLine.style.left = progressBarLeft;
      // 进度条300px
      // if (e.touches[0].clientX < ((window.innerWidth / 750) * 80)) {
      //   this.percent = 0
      // } else if (e.touches[0].clientX > ((window.innerWidth / 750) * 586)) {
      //   this.percent = 100
      // } else {
      //   this.percent = ((e.touches[0].clientX - ((window.innerWidth / 750) * 80)) / ((window.innerWidth / 750) *
      //     300)) * 100
      // }
    },
    //放开进度条
    handleTouchEnd() {
      this.currentTime = this._formatTime(
        (this.percent / 100) * this._formatSecod(this.currentSong.duration)
      );
      console.log("currentTime", this.currentTime);
      myAudio.currentTime = this._formatSecod(this.currentTime);
      var that=this;
      setTimeout(function(){
        myAudio.play()
      },200)
      this.play = 2;
      this.isTouchProgress = false;
    },
    //播放更新进度条
    onTimeupdate() {
      if (myAudio.duration != NaN && myAudio.duration != undefined) {
        if (!this.isTouchProgress) {
          this.currentTime = this._formatTime(myAudio.currentTime);
          this.percent = (myAudio.currentTime / myAudio.duration) * 100;
          const progressBarLeft = (this.percent / 100) * this.lineWidth + "px";
          if(this.$refs.barLine && this.$refs.barLine.style.left){
            this.$refs.barLine.style.left = progressBarLeft;
          }
        }
      }
    },
    /*秒前边加0*/
    _pad(num, n = 2) {
      let len = num.toString().length;
      while (len < n) {
        num = "0" + num;
        len++;
      }
      return num;
    },
    _formatSecod(time) {
      time = time || 0;
      if (typeof time == "string") {
        var min = time.split(":")[0];
        var sec = time.split(":")[1];
        var s = Number(min * 60) + Number(sec);
      }
      return s;
    },
    _formatTime(interval) {
      interval = interval || 0;
      const minute = Math.floor(interval / 60 || 0);
      const second = this._pad(interval % 60);
      return `${minute}:${second}`;
    },
    //获取时长
    onLoadedmetadata() {
      this.currentSong.duration = this._formatTime(myAudio.duration);
    },
    changeMod() {
      let playMod = this.playMod + 1;
      if (playMod > SINGLE_CYCLE_MOD) {
        playMod = SEQUENCE_MODE;
      }
      this.playMod = playMod;
      this.$store.commit("setPlayMod", playMod);
    },
    togglePlaying() {
      // this.swiperOption.autoplay.start();
      if (this.play == 1) {
        const i = idx % 5;
        console.log("hahahah", i);

        if (this.audioListId != this.banner[i].id || !myAudio) {
          if(!this.banner[i].audioList[0] || !this.banner[i].audioList[0].audioUrl){
            MessageBox.alert('暂无数据')
            return
          }
          this.audioList = this.banner[i].audioList;
          this.audioListId = this.banner[i].id;
          this.currentSong = this.banner[i].audioList[0];
          this.currentSong.idx = 0;
          this.$updateScore(5,this.currentSong.id)
          myAudio.src=this.currentSong.audioUrl
          myAudio.dataset.aid=this.currentSong.id
          if(myAudio){
            myAudio.load();
          }
        }
        if(myAudio){
          setTimeout(function(){
            myAudio.play()

          },200)
        }
      } else {
        myAudio.pause();
      }
      this.play = this.play == 1 ? "2" : "1";
    },
    // 下一首歌曲的索引
    getNextIndex() {
      let ret,
      currentIndex = Number(this.currentSong.idx),
      mod = this.playMod,
      len = this.audioList.length || 1;
      // 随机
      if (mod == RANDOM_MOD) {
        ret = randomNum(0,len-1);
      } else if (mod == SINGLE_CYCLE_MOD) {
        ret = currentIndex;
      } else {
        ret = currentIndex + 1 == len ? 0 : currentIndex + 1;
      }
      return ret;
    },
    onEnded() {
      controller
        .uploadListenTimes({
          seconds: parseInt(myAudio.currentTime),
        })
        .then((res) => {});
    },
    //播放下一首
    payNext() {
      console.log("执行了");
      const index = this.getNextIndex();
      if(index == this.currentSong.idx){
        this.payNext()
      }else{
        this.currentSong = this.audioList[index];
        this.currentSong.idx = index;
        this.play = 2;
        myAudio.load();
        var that=this;
        setTimeout(function(){
          myAudio.play()
        },200)
      }
    },
    //跳转达人榜
    toTalent() {
      if (localStorage.getItem("token")) {
        this.$router.push("/Talent");
      } else {
        this.$toLogin();
      }
    },
    goPlay(id, index, sort,type=null) {
      if (this.albumnavcurrent == 1) {
        if (localStorage.getItem("token")) {
          this.$store.commit("setCurrentIndex", index);
          this.$store.commit("setSonglist", this.albumlists);
          this.$router.push({
            path: "/Playing",
            query: {
              audioId: id,
            },
          });
        } else {
          this.$toLogin();
        }
      } else {
        if(type==1){
          this.$router.push("/ExclusiveColumnList?id=" + id + "&sortBy=" + sort);
        }else{
          this.$router.push("/albumDetail?id=" + id + "&sortBy=" + sort);
        }
      }
    },
    // 页面滚动
    scroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      // console.log("scrollTop", scrollTop);
      // console.log("width", document.body.offsetWidth);
      var differenceHeight = (document.body.offsetWidth / 750) * 32;
      // console.log(
      //   this.defaulttopHeight + this.$refs.main.offsetHeight - differenceHeight
      // );
      if(this.$refs.main){
        if (scrollTop > this.defaulttopHeight + this.$refs.main.offsetHeight - differenceHeight) {
          // console.log('到顶了')
          this.isFixedTop = true;
        } else {
          // console.log("scroll");
          this.isFixedTop = false;
        }
      }

    },
    tosearch() {
      this.$router.push({
        name: "search",
      });
    },
    // 切换专题tab
    albumnavBtn(index, type) {
      this.sortBy = 2;
      this.ishot = true;
      console.log("切换专题tab");
      this.albumnavcurrent = index;
      if (type == "专题") {
        this.albumnavType = "isTopic";
      } else if (type == "推荐") {
        this.albumnavType = "isMust";
      } else {
        this.albumnavType = "isHotPlay";
      }
      this.getCompilationList(this.albumnavType);
    },
    more() {
      this.$router.push({
        name: "Album",
        query: {
          albumnavcurrent: this.albumnavcurrent,
          ishot: this.ishot,
          sortBy: this.sortBy
        }
      });
    },
    // 切换栏目tab
    singnavBtn(singnavId, index) {
      console.log("切换栏目tab");
      this.singnavcurrent = singnavId;
      this.singnavIndex = index;
      this.singnavdata = [];
      this.page = 1;
      this.getAudioList();
    },
    // 向右切换栏目tab
    singnavnext() {
      this.singnavIndex = this.singnavIndex + 1;
      this.singnavcurrent = this.singnav[this.singnavIndex].id;
      document.getElementById(
        "sing-nav-scroll"
      ).scrollLeft += this.$refs.singNav[this.singnavIndex].clientWidth;
      this.singnavdata = [];
      this.page = 1;
      this.getAudioList();
    },
    // 向左切换栏目tab
    singnavprev() {
      this.singnavIndex = this.singnavIndex - 1;
      this.singnavcurrent = this.singnav[this.singnavIndex].id;
      document.getElementById(
        "sing-nav-scroll"
      ).scrollLeft -= this.$refs.singNav[this.singnavIndex].clientWidth;
      this.singnavdata = [];
      this.page = 1;
      this.getAudioList();
    },
    //音频列表分页
    loadMore() {
      if(this.singnavcurrent != 0){
        this.page += 1;
        this.getAudioList();
      }
    },
    // 打开签到弹出窗
    opensign() {
      if (!localStorage.getItem("token")) {
        this.$toLogin();
        console.log("先登录");
      } else {
        this.getSignList();
        this.signbool = true;
      }
    },
    getCurrentDay() {
      var date = new Date();
      var day = date.getDate();
      return day;
    },
    // 计算这个月有多少天
    getCurrentMonthDayNum: function () {
      let today = new Date();
      let dayAllThisMonth = 31;
      if (today.getMonth() + 1 != 12) {
        let currentMonthStartDate = new Date(
          today.getFullYear() + "/" + (today.getMonth() + 1) + "/01"
        ); // 本月1号的日期
        let nextMonthStartDate = new Date(
          today.getFullYear() + "/" + (today.getMonth() + 2) + "/01"
        ); // 下个月1号的日期
        dayAllThisMonth =
          (nextMonthStartDate - currentMonthStartDate) / (24 * 3600 * 1000);
      }
      return dayAllThisMonth;
    },
    //获取签到列表
    getSignList() {
      let data = {
        month: formatTime3(this.currentmonth),
      };
      console.log("month", data);
      let _self = this;
      controller
        .signList({
          month: formatTime3(this.currentmonth),
        })
        .then((res) => {
          if (res.baseData.length > 0) {
            var list = res.baseData;
            var newlist = [];
            var week = [
              {
                week: "周日",
                day: 0,
                canSign: 0,
                hasSign: 0,
              },
              {
                week: "周一",
                day: 0,
                canSign: 0,
                hasSign: 0,
              },
              {
                week: "周二",
                day: 0,
                canSign: 0,
                hasSign: 0,
              },
              {
                week: "周三",
                day: 0,
                canSign: 0,
                hasSign: 0,
              },
              {
                week: "周四",
                day: 0,
                canSign: 0,
                hasSign: 0,
              },
              {
                week: "周五",
                day: 0,
                canSign: 0,
                hasSign: 0,
              },
              {
                week: "周六",
                day: 0,
                canSign: 0,
                hasSign: 0,
              },
            ];
            var contiue = true;
            var weeknew = [];
            // var yearmoth = ''
            // yearmoth = formatTime2(Date.parse(new Date(list[0].day)))

            for (var i = 0; i < list.length; i++) {
              list[i].day = Today(Date.parse(new Date(list[i].day)));
            }

            for (var i = 0; i < week.length; i++) {
              if (week[i].week == list[0].week) {
                contiue = false;
              }
              if (contiue) {
                weeknew.push(week[i]);
              }
            }
            list = weeknew.concat(list);
            var moth = Number(this.getCurrentMonthDayNum());
            if (list.length < moth) {
              var nums = list.length - weeknew.length;
              for (var i = 0; i < moth - list.length; i++) {
                list.push({
                  week: "",
                  day: nums++,
                  canSign: 0,
                  hasSign: 0,
                });
              }
            }
            var issign = false;
            var iscanSign = false;
            for (var i = 0; i < list.length; i++) {
              let today = new Date();
              let todayStartDate = Date.parse(
                new Date(
                  today.getFullYear() + "/" + (today.getMonth() + 1) + "/01"
                )
              );
              let currentday = new Date(this.currentmonth);
              let currentStartDate = Date.parse(
                new Date(
                  currentday.getFullYear() +
                    "/" +
                    (currentday.getMonth() + 1) +
                    "/01"
                )
              );

              if (currentStartDate >= todayStartDate) {
                if (todayStartDate == currentStartDate) {
                  var nowday = this.getCurrentDay();
                  if (nowday < list[i].day) {
                    list[i].canSign = 0;
                  }
                  if (nowday == list[i].day) {
                    if (list[i].canSign == 0) {
                      iscanSign = false;
                    } else {
                      iscanSign = true;
                      if (list[i].hasSign != "-1") {
                        issign = true;
                      } else {
                        issign = false;
                      }
                    }
                  }
                  _self.issign = issign;
                  _self.iscanSign = iscanSign;
                } else {
                  list[i].canSign = 0;
                }
              }
            }
            for (var i = 0; i < list.length; i += 7) {
              newlist.push(list.slice(i, i + 7));
            }
            _self.signListdata = newlist;
            _self.signmoth = formatTime3(this.currentmonth, 2);
          }
        });
    },
    //上个月
    prevmoths() {
      let date = new Date(this.currentmonth);
      let nowdate = new Date();
      let CurrentDate = "";
      let year = date.getFullYear();
      let yearnow = nowdate.getFullYear();
      let month =
        date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth(); //自动补0
      let nowmonth =
        nowdate.getMonth() + 1 < 10
          ? "0" + (nowdate.getMonth() + 1)
          : nowdate.getMonth() + 1;

      if (
        Number(yearnow) >= Number(year) - 1 &&
        Number(year) <= Number(yearnow)
      ) {
        if (
          Number(yearnow) - 1 == Number(year) &&
          Number(month) < Number(nowmonth)
        ) {
          return;
        }
        if (
          Number(yearnow) == Number(year) &&
          Number(month) > Number(nowmonth)
        ) {
          return;
        }
      } else {
        return;
      }

      if (month < 1) {
        CurrentDate = year - 1 + "-" + "12";
      } else {
        CurrentDate = year + "-" + month;
      }

      var timestamp = Date.parse(CurrentDate);
      this.currentmonth = timestamp;
      this.getSignList();
    },
    //下个月
    nextmoths() {
      let date = new Date(this.currentmonth);
      let nowdate = new Date();
      let CurrentDate = "";
      let year = date.getFullYear();
      let yearnow = nowdate.getFullYear();
      let month =
        date.getMonth() + 1 + 1 < 10
          ? "0" + (date.getMonth() + 1 + 1)
          : date.getMonth() + 1 + 1;
      let nowmonth =
        nowdate.getMonth() + 1 < 10
          ? "0" + (nowdate.getMonth() + 1)
          : nowdate.getMonth() + 1;
      if (
        Number(yearnow) >= Number(year) - 1 &&
        Number(year) <= Number(yearnow)
      ) {
        if (
          Number(yearnow) - 1 == Number(year) &&
          Number(month) < Number(nowmonth)
        ) {
          return;
        }
        if (
          Number(yearnow) == Number(year) &&
          Number(month) > Number(nowmonth)
        ) {
          return;
        }
      } else {
        return;
      }
      if (month > 12) {
        CurrentDate = year + 1 + "-" + "01";
      } else {
        CurrentDate = year + "-" + month;
      }
      var timestamp = Date.parse(CurrentDate);
      this.currentmonth = timestamp;
      this.getSignList();
    },
    //签到
    sign() {
      console.log("签到");
      let _self = this;
      controller.sign().then((res) => {
        Toast("签到成功");
        this.$updateScore(4)
        _self.issign = true;
        _self.getSignList();
      });
    },
    // 关闭签到弹出窗
    closedate() {
      this.signbool = false;
    },
    //获取轮播图列表
    getBanner() {
      let _self = this;
      controller
        .bannerList({
          source: 1,
        })
        .then((res) => {
          console.log("首页banner", res);
          this.banner = res.baseData;
          this.firstLoad = 1;
          if (idx === 0) {
            this.audioList = this.banner[0].audioList;
            this.audioListId = this.banner[0].id;
            this.currentSong = this.banner[0].audioList[0];
            this.currentSong.idx = 0;
          }
        })
        .finally(() => {
          if(this.firstLoad === 1){
            // if(this.$refs.defaulttop){
            //   this.defaulttopHeight = this.$refs.defaulttop.offsetHeight;
            //   if(document.documentElement.clientWidth>=1024){
            //     this.defaulttopHeight = 580.2;
            //   }
            // }
            this.lineWidth = this.$refs.progressBarLine.offsetWidth;
            this.lineLeft = this.$refs.progressBarLine.offsetLeft;
          }
        });
    },
    //获取首页栏目列表
    getCategoryList() {
      let _self = this;
      controller
        .categoryList({
          keyword: "",
          page: 1,
          pageSize: 10,
          isIndex: 1,
        })
        .then((res) => {
          console.log("首页栏目", res);
          _self.meau = res.baseData.list;
        });
    },
    getCategoryListover() {
      let _self = this;
      controller
        .categoryList({
          keyword: "",
          page: 1,
          pageSize: 200,
          isIndex: "",
        })
        .then((res) => {
          console.log("首页栏目", res);
          _self.singnav = res.baseData.list;
          _self.singnavcurrent = _self.singnav[0].id;
          _self.getAudioList();
        });
    },
    hot(sortBy) {
      // console.log("最新和最HOT");
      this.ishot = !this.ishot;
      this.sortBy = sortBy;
      this.getCompilationList(this.albumnavType);
    },
    //获取合辑列表
    getCompilationList(type) {
      let _self = this;
      let data = {
        sortBy: this.sortBy,
        page: 1,
        pageSize: 3,
      };
      if (type == "isTopic") {
        controller
          .compilationList({...data,isTopic:1})
          .then((res) => {
            // console.log("合辑列表", res);
            _self.albumlists = res.baseData.list;
          });
      } else if(type == 'isMust'){
        controller
          .collectionList({...data,isMust:1})
          .then((res) => {
            // console.log("推荐列表", res);
            _self.albumlists = res.baseData.list;
          });
      } else {
        controller
          .audioList({...data,isHotPlay: 1})
          .then((res) => {
            // console.log("热播列表", res);
            _self.albumlists = res.baseData.list;
          });
      }
    },
    //获取音频列表
    getAudioList() {
      let _self = this;
      controller
        .audioList({
          sortBy: 3,
          page: this.page,
          pageSize: this.pageSize,
          categoryId: this.singnavcurrent,
        })
        .then((res) => {
          this.singnavisEnd = res.baseData.lastPage
          _self.singnavdata = _self.singnavdata.concat(res.baseData.list);
          console.log("_self.singnavdata", _self.singnavdata);
          _self.loading = res.baseData.lastPage;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-wrap{
  // touch-action: none;
}
/deep/ .mint-popup{
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
}
.set-time-wrap {
  width: 100%;
  min-height: 40%;
  z-index: 100;
  .btn {
    height: 80px;
    line-height: 80px;
    width: 100%;
    border-top: 1px solid #f2f2f2; /*no*/
    font-weight: 700;
    text-align: center;
    font-size: 24px;
  }
  .set-time {
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }
  .time-item {
    width: 100%;
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 80px;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
    &:last-child {
      border-bottom: none;
    }
    &.on .check {
      border-color: #e66d4d;
      &:after {
        content: "";
        display: inline-block;
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background-color: #e66d4d;
        border-radius: 50%;
        margin: auto;
      }
    }
    &.on .time {
      opacity: 1;
      margin-right: 20px;
    }
    .time-name {
      flex: 1;
      display: flex;
      align-items: center;
    }
    .check {
      width: 28px;
      height: 28px;
      background: #ffffff;
      border: 1px solid #999999;
      border-radius: 50%;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      transition: all 0.4s ease;
    }
    .time {
      color: #e66d4d;
      font-size: 14px;
      right: 30px;
      top: 0;
      bottom: 0;
      position: absolute;
      opacity: 0;
      transition: all 0.4s ease;
    }
  }
}
input[type="range"] {
  -webkit-appearance: none;
  width: 300px;
  border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 15px;
  border-radius: 10px; /*将轨道设为圆角的*/
  box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112; /*轨道内置阴影效果*/
}
input[type="range"]:focus {
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 25px;
  width: 25px;
  margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
  background: #ffffff;
  border-radius: 50%; /*外观设置为圆形*/
  border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
  box-shadow: 0 0.125em 0.125em #3b4547; /*添加底部阴影*/
}

input[type="range"]::-moz-range-progress {
  background: linear-gradient(to right, #059cfa, white 100%, white);
  height: 13px;
  border-radius: 10px;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 300px;
  border-radius: 10px;
}

input[type="range"]::-ms-track {
  height: 25px;
  border-radius: 10px;
  box-shadow: 0 1px 1px #def3f8, inset 0 0.125em 0.125em #0d1112;
  border-color: transparent; /*去除原有边框*/
  color: transparent; /*去除轨道内的竖线*/
}

input[type="range"]::-ms-thumb {
  border: solid 0.125em rgba(205, 224, 230, 0.5);
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: #ffffff;
  margin-top: -5px;
  box-shadow: 0 0.125em 0.125em #3b4547;
}

input[type="range"]::-ms-fill-lower {
  /*进度条已填充的部分*/
  height: 22px;
  border-radius: 10px;
  background: linear-gradient(to right, #059cfa, white 100%, white);
}

input[type="range"]::-ms-fill-upper {
  /*进度条未填充的部分*/
  height: 22px;
  border-radius: 10px;
  background: #ffffff;
}

input[type="range"]:focus::-ms-fill-lower {
  background: linear-gradient(to right, #059cfa, white 100%, white);
}

input[type="range"]:focus::-ms-fill-upper {
  background: #ffffff;
}
.mvlook {
  color: #ec7169 !important;
  font-size: 24px !important;
  width: 48px !important;
  height: 32px !important;
  text-align: center;
  border: 1px solid #ec7169 !important;
  line-height: 32px !important;
  vertical-align: middle;
  margin-left: 10px;
  display: inline-block;
  border-radius: 4px;
}
.loading {
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
  font-size: 40px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1000;

  img {
    max-width: 100%;
    max-height: 100%;
  }

  .time {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    line-height: 80px;
    padding: 0 20px;
  }
}

.defaulttop_bank {
  height: 490.88px;
}
@media screen and (min-width: 1024px) {
    .defaulttop_bank  {
        height: 580.2px;
    }
}

.defaulttop {
  position: fixed;
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 580px;
    background-color: #fff;
    z-index: -1;
  }
  .main-icon {
    position: absolute;
    top: 30px;
    bottom: 0;
    left: 35px;
    width: 55px;
    height: 55px;
  }
  .search {
    padding: 24px 0px 24px 103px;
    position: relative;
    // padding-right: 60px;

    .icon {
      width: 28px;
      height: 28px;
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      left: 117px;
      margin: auto;
    }

    .search-text {
      padding: 0 10px 0 53px;
      width: 70%;
      height: 64px;
      background: rgba(246, 246, 250, 1);
      border-radius: 32px;
      font-size: 28px;
      border: none;
    }

    .sign {
      position: absolute;
      z-index: 1;
      top: 0;
      bottom: 0;
      right: 40px;
      margin: auto;
      font-size: 20px;
      color: #fff;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .icon2 {
      width: 80px;
      height: 48px;
      margin-left: 10px;
    }
  }

  .banner {
    text-align: center;
    /* 进度条 */
    .proressBar-wrap {
      // width: 390px;
      width: 59.54%;
    }
    .progressBar {
      width: 100%;
      height: 5px;
      display: flex;
      align-items: center;

      /* 正在播放状态 */
      .playBtn,
      .playBtn img {
        width: 32px;
        height: 32px;
        display: block;
      }

      /* 进度条 */
      .progressBarLine {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #eee;
        border-radius: 10px;
        .current {
          position: absolute;
          z-index: 2;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          height: 5px;
          background: rgba(230, 109, 77, 0.85);
          border-radius: 4px;
          width: 0%;

          span {
            content: "";
            display: block;
            position: absolute;
            right: 0px;
            top: 0;
            bottom: 0;
            width: 15px;
            height: 15px;
            margin: auto;
            border-radius: 50%;
            background: linear-gradient(
              45deg,
              rgba(246, 80, 80, 1),
              rgba(240, 116, 96, 1)
            );
          }
        }

        img {
          width: 100%;
          height: 100%;
        }

        /* 音乐时间 */
        .musicTime {
          font-size: 20px;
          color: #333333;
        }
      }
    }
    .proress {
      // width: 655px;
      width: 87.33%;
      margin: 0 auto;
      padding: 5px 20px;
      box-sizing: border-box;
      background: #faf7f6;
      border-radius: 0px 0px 8px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .right {
        display: flex;
        flex: 1;
        margin-left: 30px;
        justify-content: space-between;
        img {
          width: 50px;
          height: 50px;
        }
        .set-time-val {
          position: relative;
          .time-val {
            position: absolute;
            left: 80%;
            top: -10px;
            background-color: #e66d4d;
            color: #ffffff;
            font-size: 20px;
            border-radius: 10px 10px 10px 0;
            padding: 0 5px;
            transform: scale(0.8);
          }
        }
      }
    }
    // .swiper-slide {
    //   transform: scale(0.85);
    //   .item{
    //     transform: scale(0.9);
    //   }
    // }
    // .swiper-slide-active .item,
    // .swiper-slide-duplicate-active .item{
    //   transform: scale(1);
    // }
    .item {
      border-radius: 8px;
      transform: scale(0.9);
      transition: all 0.4s ease;
      position: relative;
      width: 100%;
      height: 100%;
    }

    .type {
      /*height: 25px;*/
      background: #e66d4d;
      border-radius: 0 8px 0 8px;
      color: #fff;
      text-align: center;
      padding: 10px;
      font-size: 20px;
      position: absolute;
      z-index: 1;
      right: 0;
      top: 10px;
    }
    .swiper-container{
      max-height: 480px !important;
    }

    @media screen and (max-width: 500px) {
      .swiper-container{
        max-height: 320px !important;
      }
    }

    .slide-image {
      border-radius: 8px;
      width: 100%;
      vertical-align: middle;
    }

    swiper-slide {
      overflow: initial;
    }

    .bottom {
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      height: 78px;
      line-height: 78px;
      background: rgba(0, 0, 0, 1);
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      opacity: 0.6;
      border-radius: 0px 0px 8px 8px;

      .process {
        width: 394px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        position: relative;
        background: url(https://youyang-cdn.mdshuzhi.com/upload/play_kedu.png)
          no-repeat center center;
        background-size: 100%;

        .currentbg {
          max-width: 100%;
        }

        // 进度条
        slider {
          opacity: 0;
          width: 100%;
          height: 100%;
          padding: 0;
          position: absolute;
          z-index: 3;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
        }

        .current {
          position: absolute;
          z-index: 2;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          height: 32px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 4px;
          width: 0%;

          &:after {
            content: "";
            display: block;
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            height: 100%;
            margin: auto;
            background: linear-gradient(
              45deg,
              rgba(246, 80, 80, 1),
              rgba(240, 116, 96, 1)
            );
          }
        }
      }

      .mode {
        width: 48px;
        height: 48px;

        img {
          max-width: 100%;
          max-height: 100%;
          display: block;
        }
      }

      .play {
        width: 56px;
        height: 56px;

        img {
          max-width: 100%;
          max-height: 100%;
          display: block;
        }
      }

      .settime {
        width: 48px;
        height: 30px;
        border: 2px solid rgba(255, 255, 255, 1);
        border-radius: 6px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        position: relative;

        .time {
          padding: 0 8px;
          height: 24px;
          line-height: 24px;
          background: rgba(255, 255, 255, 1);
          border-radius: 12px 12px 12px 2px;
          font-size: 16px;
          color: #323232;
          position: absolute;
          z-index: 1;
          top: -20px;
          right: -50px;
        }
      }
    }
  }
}

.main {
  padding: 32px 24px;
  padding-top: 0;
  background-color: #fff;

  .meau {
    padding: 30px 24px 0;
    overflow: hidden;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 20%;
      text-align: center;
      margin-bottom: 30px;
      .text{
        font-size: 26px;
        color: #323232;
        line-height: 40px;
        font-weight: 500;
      }
      .icon {
        display: block;
        margin: 0 auto 20px;
        width: 72px;
        height: 72px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // margin-bottom: 20px;
  .albumlists {
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
    border: 2px solid rgba(238, 123, 93, 1);
    box-shadow: 0px 0px 40px 0px rgba(102, 102, 102, 0.1);
    border-radius: 20px;
    margin-bottom: 32px;

    .filter {
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
      height: 120px;
      line-height: 120px;
      padding-left: 210px;
      padding-right: 40px;
      text-align: center;
      font-size: 20px;
      background: url(../../static/images/pic_project_bg@2x.png) no-repeat 0 0;
      background-size: 100%;

      .item {
        float: left;
        width: 25%;
        position: relative;
        color: #fff;
        font-size: 32px;

        .cir {
          width: 24px;
          height: 10px;
          line-height: 24px;
          display: inline-block;
          position: absolute;
          z-index: 1;
          bottom: 19px;
          left: 0;
          right: 0;
          margin: auto;
          display: none;
        }
      }

      .on {
        font-weight: 700;
        font-size: 38px;

        .cir {
          display: block;
        }
      }
    }

    .lists {
      overflow: hidden;

      .top {
        padding: 30px 23px;
        font-size: 24px;
        color: #A8ACBB;
        line-height: 40px;
        font-weight: 500;
        overflow: hidden;

        .item {
          float: left;
          margin-right: 34px;
        }

        .on {
          color: #e66d4d;
        }

        .more {
          float: right;
        }
      }
    }

    .con {
      .item {
        padding: 0 24px;
        margin-bottom: 32px;
        overflow: hidden;
        position: relative;
      }

      .pic {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        margin-right: 32px;
        float: left;
        background-color: #eee;
        position: relative;

        img {
          border-radius: 8px;
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 2;
          background-color: #eee;
        }

        .icon {
          width: 40px;
          height: 40px;
          position: absolute;
          z-index: 3;
          left: 0;
          top: 0;
        }

        &:after {
          content: "";
          width: 110px;
          height: 110px;
          background: rgba(50, 50, 50, 1);
          border-radius: 50%;
          position: absolute;
          z-index: 1;
          top: 0;
          bottom: 0;
          right: -16px;
          margin: auto;
        }
      }

      .hotitem .pic:after {
        display: none;
      }

      .right {
        overflow: hidden;
      }

      .hot_icon {
        width: 28px;
        height: 28px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -1px;
        margin-right: 10px;
      }

      .name {
        color: #323232;
        font-size: 30px;
        margin-bottom: 20px;
        padding-right: 80px;
        display: flex;
        align-items: center;
        .n {
          display: inline-block;
          max-width: 70%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }

      .nums {
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        display: inline-block;
        background: rgba(242, 171, 94, 0.16);
        color: #f2ab5e;
        font-size: 20px;
        border-radius: 4px;
        font-size: 24px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .play {
        width: 68px;
        height: 68px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 12px;
        margin: auto;
        z-index: 1;
      }
    }
  }

  .advertise {
    overflow: hidden;
    text-align: center;
    width: 100%;

    img {
      width: 100%;
    }
  }
}

.singlists {
  position: relative;
  z-index: 100;
  overflow: hidden;
  background-color: #fff;
  // width: 750px;
  width: 100%;
  min-width: 640px;
  max-width: 1280px;
  min-height: 92vh;
  margin: 0 auto;

  .filter {
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    overflow: hidden;
    height: 100px;
    line-height: 100px;
    /*padding:0 32px;*/
    text-align: center;
    color: #a9a9c9;
    font-size: 30px;
    white-space: nowrap;
    z-index: 999;
    background-color: #fff;

    .box {
      overflow: hidden;
    }

    .scroll {
      width: 100%;
      height: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      display: flex;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .item {
      white-space: nowrap;
      position: relative;
      padding: 0 20px;
      /*width: 120px;*/
      text-align: center;
      display: inline-block;

      .cir {
        width: 24px;
        height: 10px;
        line-height: 24px;
        display: inline-block;
        position: absolute;
        z-index: 1;
        bottom: 19px;
        left: 0;
        right: 0;
        margin: auto;
        display: none;
      }
    }

    .btn {
      width: 110px;
      height: 104px;
      margin: auto;
    }

    .prev {
      float: left;
    }

    .next {
      float: right;
    }

    .on {
      color: #e66d4d;
      font-weight: 700;

      .cir {
        display: block;
      }
    }
  }

  .lists {
    width: 100%;
    overflow: hidden;
    padding: 0 30px;
    box-sizing: border-box;
    margin-top: 32px;

    .item {
      position: relative;
      margin-bottom: 32px;
      background-color: #f2f2f2;
      overflow: hidden;

      .musicImg {
        width: 100%;
        // height: 330px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          background: #333;
        }

        .listenBox {
          width: 100%;
          height: 48px;
          position: absolute;
          bottom: 16px;
          left: 0;
          padding: 0 16px;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 20px;
          color: #fff;

          .listenPic {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            font-size: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fff;
            color: rgb(99, 139, 101);
            .listen {
              background: rgba(#000, 0.5);
              width: 46px;
              height: 46px;
              border-radius: 50%;
            }
          }
        }

        .new {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          width: 70px;
          height: 70px;
          background: url(https://youyang-cdn.mdshuzhi.com/upload/tag_new.png)
            no-repeat center center;
          background-size: 100%;
          color: #fff;
          line-height: 70px;
          text-align: center;
        }
      }
    }

    .musicWord {
      width: 100%;
      margin-top: 20px;
      padding-left: 8px;
      box-sizing: border-box;

      img {
        width: 24px;
        height: 28px;
        margin-right: 16px;
      }

      span {
        color: #333;
        font-size: 28px;
        // line-height: 42px;
        font-weight: 500;
        letter-spacing: 2px;
      }
      .musicDesc{
        width: 100%;
        // height: 72px;
        // line-height: 36px;
        font-size: 24px;
        letter-spacing: 2px;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #A8ACBC;
        display: -webkit-box;
        /* ! autoprefixer: off */
          -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .lowSongs {
      width: 100%;
      line-height: 40px;
      border-radius: 4px;
      background: rgba(255, 237, 234, 1);
      border: 2px solid rgba(230, 109, 77, 1);
      text-align: center;
      font-size: 20px;
      color: #e66d4d;
      margin: 13px 0;
    }

    .songType {
      span:first-child {
        background: #fdf1e5;
        border-radius: 4px;
        font-size: 26px;
        color: #f2ab5e;
        margin-right: 14px;
        padding: 7px 13px;
      }

      span:nth-child(2) {
        background: rgba(106, 191, 190, 0.16);
        border-radius: 4px;
        color: #6abfbe;
        font-size: 26px;
        padding: 7px 13px;
      }
    }
  }

  .in {
    overflow: hidden;
  }

  .left {
    float: left;
    // width: 330px;
    // margin-right: 26px;
    width: 48%;
    margin-right: 4%;
  }
  .end{
    height: 100px;
  }

  .right {
    float: left;
    // width: 330px;
    width: 48%;
  }
}

.fixedClass {
  position: fixed;
  top: 0;
}

.prop {
  width: 100%;
  min-width: 640px;
  max-width: 960px;
  margin: 0 auto;
  position: fixed;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.dateprop {
  position: fixed;
  width: 658px;
  height: 807px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 999;
  border-radius: 20px;

  .prev,
  .next {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    z-index: 10;
    font-size: 40px;
    top: 20px;
    color: #cecece;
    border-radius: 10px;
    border: #cecece 1px solid;
  }

  .prev {
    left: 20px;
  }
  .next {
    right: 20px;
  }

  .datebg {
    width: 100%;
    border-radius: 20px;
  }

  .date {
    overflow: hidden;
    position: absolute;
    z-index: 10;
    top: 120px;
    left: 30px;
    right: 30px;
    padding: 10px 5px;
    margin: auto;
    box-sizing: border-box;

    .on {
      color: #e66d4d;
    }

    .con {
      height: 450px;
      // margin-bottom: 180px;
    }

    .btn {
      width: 350px;
      height: 89px;
      margin: auto;
      display: block;
      background: url(https://youyang-cdn.mdshuzhi.com/upload/icon_yiqiandao.png)
        no-repeat center center;
      background-size: 100%;
      color: #e55f3c;
      font-size: 30px;
      line-height: 89px;
      text-align: center;
    }

    .year {
      color: #e66d4d;
      font-size: 30px;
      line-height: 80px;
      text-align: center;
      margin-bottom: 10px;
    }

    .tr {
      text-align: center;
      margin-bottom: 10px;
      font-size: 20px;
      color: #323232;

      overflow: hidden;
    }

    .td,
    .th {
      float: left;
      width: 14.28%;
      height: 36px;
    }

    .th {
      margin-bottom: 10px;
    }

    .td {
      color: #a8acbb;

      img {
        vertical-align: top !important;
        width: 36px;
        height: 36px;
      }
    }

    .nums {
      width: 36px;
      height: 36px;
      line-height: 36px;
      background: rgba(238, 238, 244, 1);
      border-radius: 50%;
      display: inline-block;

      .on {
        background-color: #e55f3c;
        color: #fff;
      }
    }

    .select {
      width: 36px;
      height: 36px;
      line-height: 36px;
      background: #6abfbe;
      border-radius: 50%;
      color: #fff;
      font-size: 28px;
      display: inline-block;
    }

    .noselect {
      width: 36px;
      height: 36px;
      line-height: 36px;
      background: #ffac00;
      border-radius: 50%;
      color: #fff;
      font-size: 28px;
      display: inline-block;
    }
  }

  .close {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: -90px;
    width: 70px;
    height: 70px;
    margin: auto;
  }
}

// 定时弹窗


  .packerDialog {
    width: 100%;
    // max-height: 80%;
    background: #FFF;
    // position: fixed;
    // bottom: 0;
    // // left: 0;
    // right: 0;
    margin: auto;
    z-index: 9999;
    // animation-name: DialogfadeInUp;
    // animation-duration: .3s;
    // animation-fill-mode: both;
    color: #323232;
    font-size: 32px;
  }

  .packerDialog .content {
    padding: 0 32px;
  }

  .packerDialog .content .item {
    line-height: 105px;
    position: relative;
    border-bottom: 1px solid #F2F2F2;
  }

  .packerDialog .content .item:last-child {
    border-bottom: none;
  }

  .packerDialog .content .check {
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.4s ease;
  }

  .packerDialog .content .time {
    color: #E66D4D;
    font-size: 28px;
    right: 60px;
    top: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    transition: all 0.4s ease;
  }

  .packerDialog .content .item.on .check {
    border-color: #E66D4D;
  }

  .packerDialog .content .item.on .check:after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background-color: #E66D4D;
    border-radius: 50%;
    margin: auto;
  }

  .packerDialog .content .item.on .time {
    opacity: 1;
  }

  .packerDialog .btn {
    height: 116px;
    line-height: 116px;
    width: 100%;
    border-top: 1px solid #F2F2F2;
    font-weight: 700;
    text-align: center;
  }


</style>
